<template>
  <Modal v-model="show" :ref="ref" title="编辑"
      :transfer="true" 
      v-bind="config"
      :width="config.width>0?config.width:width">
      <div class="content">
        <Tabs slot="right" name="modal" v-model="tabname" type="card" style="height:100%">
          <TabPane tab="modal" label="进行中" name="1" context-menu>
            <pg-form :data="data"></pg-form>
          </TabPane>
          <TabPane tab="modal" label="已完成" name="2" context-menu>
            <pg-form :data="data"></pg-form>
          </TabPane>
        </Tabs>
        <slot></slot>
        </div>
        
      <div slot="footer">
        <Button type="default" @click="cancel">取消</Button>
        <Button type="primary" :loading="loading" @click="ok">确定</Button>
      </div>
    </Modal>
</template>

<script>
import pgForm from './pg-form.vue'
export default {
  name:'',
  components: {pgForm},
  inject:['anc'],
  data() {
    return {
      ref:'modal',
      show:false,
      width:600,
      tabname:1
    };
  },
  props: {
    config:{
        default:()=>{
            return {
                title:'',
                width:0,
                height:400,
                draggable:false,
                mask:true,
                closable:true,
                okText:'确定',
                cancelText:'取消',
                widthRatio:0.7
            }
        }
    },
    data:{
      default:()=>{
        return {}
      }
    }
  },
  watch: {},
  computed: {},
  created() {},
  mounted() {
    this.$nextTick(()=>{
        this.$set(this.anc.vms,this.ref, this);
        const obs = new ResizeObserver((entries) => {
            this.width = entries[0].contentRect.width*this.config.widthRatio
        });
        obs.observe(this.$el);
    })
  },
  methods: {
    ok(){},
    cancel(){}
  }
};
</script>
<style scoped lang="scss">
$top:40px;
.content {
  position: relative;
  width:100%;
  height:70vh;
}
</style>